<template>
	<view class="topBox">

		<view class="my-top">
			<text>我的</text>
			<!-- 设置-------------------- -->
			<view class="setting" @click="toSetting()">
				<image src="https://cdn8.axureshop.com/demo/1689476/images/%E6%88%91%E7%9A%84/u4801.png"></image>
			</view>
		</view>
		<view class="card-box">
			<view style="display: flex;">
				<view>
					<image :src="msgData.avatar"></image>
				</view>
				<view class="tagBox">
					<view class="msgData-box">
						<text class="msgData-name"
							style="font-size: 20px;color: #fff;margin-right: 20rpx;">{{msgData.name||msgData.nickname}}</text>
						<!-- <view class="tagItem"> -->
						<up-tag :text="RelationsSearchData.relationship" shape="circle" bgColor="#fa746b" size="mini" class="msgData-me"></up-tag>
						<up-tag text="已签约" shape="circle" bgColor="#28d094" size="mini" style="margin-left: 20rpx;"
							class="msgData-sign"></up-tag>
						<!-- </view> -->
					</view>
					<view class="nameBox">
						<text> 男</text>
						<text> 28岁</text>
					</view>
				</view>
			</view>
			<button class="homeTeam">切换家庭成员</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		getUserInfoApi
	} from '../../api/login';
	import {
		onLoad
	} from "@dcloudio/uni-app"
	// 用户信息
	const msgData = ref({})


	// 获取用户信息
	const getUserInfo = async () => {

		const res = await getUserInfoApi()
		if (res.code == 200) {
			console.log(res);
			// console.log(11,res.data);

			msgData.value = res.data
			// console.log(uid.value);
		}
	}

	onLoad(() => {
		getUserInfo()
	})

	//点击设置跳转到设置页面
	function toSetting() {
		uni.navigateTo({
			url: '/minepackge/pages/mine-setting/mine-setting'
		})
	}
</script>

<style lang="scss" scoped>
	.homeTeam {
		width: 220rpx;
		height: 64rpx;
		color: #2984f8;
		font-size: 24rpx;
		border-radius: 16px;
		margin-right: 40rpx;

	}

	.nameBox {
		// display: inline;
		font-size: 12px;
		color: #fff;
		margin-top: 20rpx;


	}

	.tagBox {
		margin-top: 50rpx;
		display: flex;
		flex-direction: column;

		.tagItem {
			margin-top: 10rpx;
			margin-right: 20rpx;
		}
	}

	.card-box {
		// display: flex;
		// margin-bottom: 50rpx;
		width: 100%;
		margin-top: 30rpx;
		background: #2984f8;
		height: 332rpx;
		border-radius: 16px;

		// position: relative;
		image {
			width: 128rpx;
			height: 128rpx;
			margin: 40rpx;
		}
	}

	.my-top {
		display: flex;
		justify-content: space-between;

		text {
			font-size: 28px;
		}

		image {
			width: 40rpx;
			height: 40rpx;
			margin-top: 20rpx;
		}
	}

	.topBox {
		background: #fff;
		margin-bottom: 20rpx;
		padding: 0 40rpx;
		padding-bottom: 60rpx;
	}

	.msgData-box {
		display: flex;
		/* 启用 Flex 布局 */
		align-items: center;
		/* 垂直居中对齐 */
		width: 100%;
		/* 占满父容器宽度 */
	}

	.msgData-name {
		width: 210rpx;
		display: flex;
		white-space: nowrap;
		/* 确保文本不会换行 */
		overflow: hidden;
		/* 隐藏溢出的内容 */
		text-overflow: ellipsis;
		/* 显示省略符号来代表被修剪的文本 */
	}

	.msgData-me,
	.msgData-sign {
		flex-shrink: 0;
		line-height: 40rpx;

	}

	.msgData-me {
		position: static;
		top: auto;
		right: auto;

	}

	.msgData-sign {
		margin-left: 20rpx;
	}
</style>